<template>
<div>
    <div class="userInfos">
        <div class="userBox">
            <div class="userBoxLeft">
                <!-- 头像 -->
                <div class="headPortrait">
                    <img v-lazy="userInfos.portrait.indexOf('http') != -1 ? userInfos.portrait : imgUrl+userInfos.portrait" />
                </div>
                <div class="userNameBox">
                    <div class="userName">{{userInfos.nick}}</div>
                    <router-link to="/businessCard" tag="div" class="businessCard">小程序名片</router-link>
                </div>
            </div>
            <router-link to="/PersonalSettings" class="userBoxRight">设置</router-link>
        </div>
    </div>
    <!-- 设置区域 -->
    <div class="settingBox">
        <router-link to="/AccountSecurity" class="MyComments commentBox">
            <div class="settingBoxLeft">账号与安全</div>
            <div class="settingBoxRight">
                <span class="rowBox"></span>
            </div>
        </router-link>
        <!-- <router-link to="/NewNewsAlert" class="MyComments commentBox">
            <div class="settingBoxLeft">新消息提醒</div>
            <div class="settingBoxRight">
                <span class="rowBox"></span>
            </div>
        </router-link> -->
        <router-link to="/AboutAerobic" class="MyComments commentBox">
            <div class="settingBoxLeft">关于有氧</div>
            <div class="settingBoxRight">
                <span class="rowBox"></span>
            </div>
        </router-link>
    </div>
</div>
</template>

<script>
import controller from "@/components/controllers/controllers";
import url from "@/router/http_conf.js"
export default {
    name: "setting",
    data() {
        return {
            userInfos: {},
            imgUrl: url
        };
    },
    created() {
        this.userInfos = localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")) : '';
    },
};
</script>

<style lang="scss" scoped>
/*箭头*/
.rowBox {
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    display: inline-block;
    border-top: 2px solid #a8acbb;
    border-right: 2px solid #a8acbb;
    margin-left: 12px;
}

/* 用户信息 */
.userInfos {
    // width: 750px;
    min-width: 640px;
    max-width: 960px;
    margin: 0 auto;
    height: 212px;
    background: linear-gradient(to bottom, #f3cdbc, #fcc4a9);
    display: flex;
    justify-content: center;
    align-items: center;

    .userBox {
        // width: 702px;
        width: 93.6%;
        height: 168px;
        background-color: #fff;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 24px;
        box-sizing: border-box;

        .userBoxLeft {
            display: flex;
            align-items: center;

            .headPortrait {
                width: 120px;
                height: 120px;
                border-radius: 60px;
                overflow: hidden;
                margin-right: 39px;

                img {
                    width: 100%;
                    height: 100%x;
                }
            }

            .userNameBox {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .userName {
                    font-size: 40px;
                    color: #323232;
                    line-height: 46px;
                    font-weight: bold;
                }

                /* 小程序名片 */
                .businessCard {
                    width: 180px;
                    line-height: 40px;
                    border-radius: 4px;
                    font-size: 20px;
                    color: #a8acbb;
                    border: 2px solid #a8acbb;
                    text-align: center;
                    margin-top: 16px;
                }
            }
        }

        /* 设置按钮 */
        .userBoxRight {
            width: 104px;
            line-height: 36px;
            border-radius: 18px;
            border: 2px solid #a8acbb;
            color: #a8acbb;
            font-size: 24px;
            text-align: center;
        }

        image {
            width: 100%;
            height: 100%;
        }
    }
}

/*我的设置等--区域*/
.settingBox {
    width: 100%;
    padding: 0 25px;
    box-sizing: border-box;
    background-color: #fff;

    .MyComments {
        width: 100%;
        height: 108px;
        border-bottom: 2px solid #f2f2f2;

        .settingBoxLeft {
            font-size: 30px;
            color: #323232;
            font-weight: 500;
        }

        .settingBoxRight {
            color: #a8acbb;
            font-size: 24px;
        }
    }

    .commentBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>
